<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-S-'>/**
</span> * @fileOverview 表格
 * @ignore
 * @author dxq613@gmail.com
 */


var $ = require(&#39;jquery&#39;),
  BUI = require(&#39;bui-common&#39;),
  Mask = require(&#39;bui-mask&#39;),
  UA = BUI.UA,
  Component = BUI.Component,
  toolbar = require(&#39;bui-toolbar&#39;),
  List = require(&#39;bui-list&#39;),
  Header = require(&#39;./header&#39;),
  Column = require(&#39;./column&#39;);

function isPercent(str){
  if(BUI.isString(str)){
    return str.indexOf(&#39;%&#39;) !== -1;
  }
  return false;
}

var PREFIX = BUI.prefix,
  CLS_GRID_HEADER_CONTAINER = PREFIX + &#39;grid-header-container&#39;,
  CLS_GRID_BODY = PREFIX + &#39;grid-body&#39;,
  CLS_GRID_WITH = PREFIX + &#39;grid-width&#39;,
  CLS_GRID_HEIGHT = PREFIX + &#39;grid-height&#39;,
  CLS_GRID_BORDER = PREFIX + &#39;grid-border&#39;,
  CLS_GRID_TBAR = PREFIX + &#39;grid-tbar&#39;,
  CLS_GRID_BBAR = PREFIX + &#39;grid-bbar&#39;,
  CLS_BUTTON_BAR= PREFIX + &#39;grid-button-bar&#39;,
  CLS_GRID_STRIPE = PREFIX + &#39;grid-strip&#39;,
  CLS_GRID_ROW = PREFIX + &#39;grid-row&#39;,
  CLS_ROW_ODD = PREFIX + &#39;grid-row-odd&#39;,
  CLS_ROW_EVEN = PREFIX + &#39;grid-row-even&#39;,
  CLS_ROW_FIRST = PREFIX + &#39;grid-row-first&#39;,
  CLS_GRID_CELL = PREFIX + &#39;grid-cell&#39;,
  CLS_GRID_CELL_INNER = PREFIX + &#39;grid-cell-inner&#39;,
  CLS_TD_PREFIX = &#39;grid-td-&#39;,
  CLS_CELL_TEXT = PREFIX + &#39;grid-cell-text&#39;,
  CLS_CELL_EMPTY = PREFIX + &#39;grid-cell-empty&#39;,
  CLS_SCROLL_WITH = &#39;17&#39;,
  CLS_HIDE = PREFIX + &#39;hidden&#39;,
  ATTR_COLUMN_FIELD = &#39;data-column-field&#39;,
  WIDTH_BORDER = 2,
  HEIGHT_BAR_PADDING = 1;  

function getInnerWidth(width){
  var _self = this;
    if(BUI.isNumber(width)){
      width -= WIDTH_BORDER;
    }
    return width;
}

<span id='BUI-Grid-GridView'>/**
</span> * @class BUI.Grid.GridView
 * @private
 * @extends BUI.List.SimpleListView
 * 表格的视图层
 */
var gridView = List.SimpleListView.extend({

  //设置 body和table的标签
  renderUI : function(){
    var _self = this,
      el = _self.get(&#39;el&#39;),
      bodyEl = el.find(&#39;.&#39; + CLS_GRID_BODY);
    _self.set(&#39;bodyEl&#39;,bodyEl);
    _self._setTableTpl();
  },
<span id='global-method-getItemTpl'>  /**
</span>   * 获取行模板
   * @ignore
   */
  getItemTpl : function  (record,index) {
    var _self = this,
      columns =  _self._getColumns(),
      tbodyEl = _self.get(&#39;tbodyEl&#39;),
      rowTpl = _self.get(&#39;rowTpl&#39;),
      oddCls = index % 2 === 0 ? CLS_ROW_ODD : CLS_ROW_EVEN,
      cellsTpl = [],
      rowEl;

    BUI.each(columns, function (column) {
      var dataIndex = column.get(&#39;dataIndex&#39;);
      cellsTpl.push(_self._getCellTpl(column, dataIndex, record,index));
    });

    if(_self.get(&#39;useEmptyCell&#39;) /*&amp;&amp; !_self.get(&#39;forceFit&#39;)*/){
      cellsTpl.push(_self._getEmptyCellTpl());
    }

    rowTpl = BUI.substitute(rowTpl,{cellsTpl:cellsTpl.join(&#39;&#39;), oddCls:oddCls});
    return rowTpl;
  },
<span id='BUI-Grid-GridView-method-findRow'>  /**
</span>   * find the dom by the record in this component
   * @param {Object} record the record used to find row dom
   * @return jQuery
   */
  findRow:function (record) {
      var _self = this;
      return $(_self.findElement(record));
  },
<span id='BUI-Grid-GridView-method-findCell'>  /**
</span>   * find the cell dom by record and column id
   * @param {String} id the column id
   * @param {jQuery} rowEl the dom that showed in this component
   * @return  {jQuery}
   */
  findCell : function(id,rowEl){
    var cls = CLS_TD_PREFIX + id;
      return rowEl.find(&#39;.&#39; + cls);
  },
<span id='BUI-Grid-GridView-method-resetHeaderRow'>  /**
</span>   * 重新创建表格的首行，一般在表格初始化完成后，或者列发生改变时
   */
  resetHeaderRow:function () {
    if(!this.get(&#39;useHeaderRow&#39;)){
      return;
    }
    var _self = this,
      headerRowEl = _self.get(&#39;headerRowEl&#39;),
      tbodyEl = _self.get(&#39;tbodyEl&#39;);
    if(headerRowEl){
      headerRowEl.remove();
    }
    headerRowEl = _self._createHeaderRow();
    headerRowEl.prependTo(tbodyEl);
    _self.set(&#39;headerRowEl&#39;, headerRowEl);
  },
<span id='global-method-resetColumnsWidth'>  /**
</span>   * when header&#39;s column width changed, column in this component changed followed
   * @ignore
   */
  resetColumnsWidth:function (column,width) {
    var _self = this,
      headerRowEl = _self.get(&#39;headerRowEl&#39;),
      cell = _self.findCell(column.get(&#39;id&#39;), headerRowEl);
    width = width || column.get(&#39;width&#39;);
    if (cell) {
      cell.width(width);
    }
    _self.setTableWidth();
  },
  //set table width
  setTableWidth:function (columnsWidth) {
    if(!columnsWidth &amp;&amp; isPercent(this.get(&#39;width&#39;))){
      this.get(&#39;tableEl&#39;).width(&#39;100%&#39;);
      return;
    }
    var _self = this,
      width = _self._getInnerWidth(),
      height = _self.get(&#39;height&#39;),
      tableEl = _self.get(&#39;tableEl&#39;),
      forceFit = _self.get(&#39;forceFit&#39;),
      headerRowEl = _self.get(&#39;headerRowEl&#39;);
    //使用百分比的宽度，不进行计算
    if(!isPercent(columnsWidth)){
      
      columnsWidth = columnsWidth || _self._getColumnsWidth();
      if (!width) {
        return;
      }
      if (width &gt;= columnsWidth) {
        columnsWidth = width;
        if (height) {
          var scrollWidth = (UA.ie == 6 || UA.ie == 7) ? CLS_SCROLL_WITH + 2 : CLS_SCROLL_WITH;
          columnsWidth = width - scrollWidth;
        }
      }
    }
    
    tableEl.width(columnsWidth);
  },
<span id='BUI-Grid-GridView-method-setBodyWidth'>  /**
</span>   * 表格表体的宽度
   * @param {Number} width 宽度
   */
  setBodyWidth : function(width){
    var _self = this,
      bodyEl = _self.get(&#39;bodyEl&#39;);
    width = width || _self._getInnerWidth();
    bodyEl.width(width);

  },
<span id='BUI-Grid-GridView-method-setBodyHeight'>  /**
</span>   * 设置表体高度
   * @param {Number} height 高度
   */
  setBodyHeight : function(height){
    var _self = this,
      bodyEl = _self.get(&#39;bodyEl&#39;),
      bodyHeight = height,
      siblings = bodyEl.siblings();

    BUI.each(siblings,function(item){
      if($(item).css(&#39;display&#39;) !== &#39;none&#39;){
        bodyHeight -= $(item).outerHeight();
      }
    });
    bodyEl.height(bodyHeight);
  },
  //show or hide column
  setColumnVisible:function (column) {
    var _self = this,
      hide = !column.get(&#39;visible&#39;),
      colId = column.get(&#39;id&#39;),
      tbodyEl = _self.get(&#39;tbodyEl&#39;),
      cells = $(&#39;.&#39; + CLS_TD_PREFIX + colId,tbodyEl);
    if (hide) {
      cells.hide();
    } else {
      cells.show();
    }
  },
<span id='BUI-Grid-GridView-method-updateItem'>  /**
</span>   * 更新数据
   * @param  {Object} record 更新的数据
   */
  updateItem : function(record){
    var _self = this, 
      items = _self.getItems(),
      index = BUI.Array.indexOf(record,items),
      columns = _self._getColumns(),
      element = null,
      tpl;
    if(index &gt;=0 ){
      element = _self.findElement(record);

      BUI.each(columns,function(column){
        var cellEl = _self.findCell(column.get(&#39;id&#39;),$(element)),
          innerEl = cellEl.find(&#39;.&#39; + CLS_GRID_CELL_INNER),
          textTpl = _self._getCellText(column,record,index);
        innerEl.html(textTpl);
      });
      return element;
    }
  },
<span id='BUI-Grid-GridView-method-showEmptyText'>  /**
</span>   * 显示没有数据时的提示信息
   */
  showEmptyText : function(){
    var _self = this,
      bodyEl = _self.get(&#39;bodyEl&#39;),
      emptyDataTpl = _self.get(&#39;emptyDataTpl&#39;),
      emptyEl = _self.get(&#39;emptyEl&#39;);
    if(emptyEl){
      emptyEl.remove();
    }
    var emptyEl = $(emptyDataTpl).appendTo(bodyEl);
    _self.set(&#39;emptyEl&#39;,emptyEl);
  },
<span id='BUI-Grid-GridView-method-clearEmptyText'>  /**
</span>   * 清除没有数据时的提示信息
   */
  clearEmptyText : function(){
     var _self = this,
      emptyEl = _self.get(&#39;emptyEl&#39;);
    if(emptyEl){
      emptyEl.remove();
    }
  },
  //设置第一行空白行，不显示任何数据，仅用于设置列的宽度
  _createHeaderRow:function () {
    var _self = this,
        columns = _self._getColumns(),
        tbodyEl = _self.get(&#39;tbodyEl&#39;),
        rowTpl = _self.get(&#39;headerRowTpl&#39;),
        rowEl,
        cellsTpl = [];

    $.each(columns, function (index,column) {
      cellsTpl.push(_self._getHeaderCellTpl(column));
    });

    //if this component set width,add a empty column to fit row width
    if(_self.get(&#39;useEmptyCell&#39;)/* &amp;&amp; !_self.get(&#39;forceFit&#39;)*/){
      cellsTpl.push(_self._getEmptyCellTpl());
    }
    rowTpl = BUI.substitute(rowTpl,{cellsTpl:cellsTpl.join(&#39;&#39;)});
    rowEl = $(rowTpl).appendTo(tbodyEl);
    return rowEl;
  },
  //get the sum of the columns&#39; width
  _getColumnsWidth:function () {
    var _self = this,
      columns = _self.get(&#39;columns&#39;),
      totalWidth = 0;

    BUI.each(columns, function (column) {
        if (column.get(&#39;visible&#39;)) {
            totalWidth += column.get(&#39;el&#39;).outerWidth();
        }
    });
    return totalWidth;
  },
  //获取列集合
  _getColumns : function(){
    return this.get(&#39;columns&#39;);
  },
  //get cell text by record and column
  _getCellText:function (column, record,index) {
      var _self = this,
        dataIndex = column.get(&#39;dataIndex&#39;),
        textTpl = column.get(&#39;cellTpl&#39;) || _self.get(&#39;cellTextTpl&#39;),
        text = _self._getCellInnerText(column,dataIndex, record,index);
      return BUI.substitute(textTpl,{text:text, tips:_self._getTips(column, dataIndex, record)});
  },
  _getCellInnerText : function(column,dataIndex, record,index){
    //renderer 时发生错误可能性很高
    try{
      var _self = this,
        renderer = column.get(&#39;renderer&#39;),
        text = BUI.getValue(record,dataIndex);

      text = renderer ? renderer(text, record,index) : text;
      return text == null ? &#39;&#39; : text;
    }catch(ex){
      throw &#39;column:&#39; + column.get(&#39;title&#39;) +&#39; fomat error!&#39;;
    }
  },
  //get cell template by config and record
  _getCellTpl:function (column, dataIndex, record,index) {
    var _self = this,
      cellText = _self._getCellText(column, record,index),
      cellTpl = _self.get(&#39;cellTpl&#39;);
    return BUI.substitute(cellTpl,{
      elCls : column.get(&#39;elCls&#39;),
      id:column.get(&#39;id&#39;),
      dataIndex:dataIndex,
      cellText:cellText,
      hideCls:!column.get(&#39;visible&#39;) ? CLS_HIDE : &#39;&#39;
    });
  },
  //获取空白单元格的模板
  _getEmptyCellTpl:function () {
    return &#39;&lt;td class=&quot;&#39; + CLS_GRID_CELL + &#39; &#39; + CLS_CELL_EMPTY + &#39;&quot;&gt;&amp;nbsp;&lt;/td&gt;&#39;;
  },
  //获取空白行单元格模板
  _getHeaderCellTpl:function (column) {
    var _self = this,
      headerCellTpl = _self.get(&#39;headerCellTpl&#39;);
    return BUI.substitute(headerCellTpl,{
      id:column.get(&#39;id&#39;),
      width:column.get(&#39;width&#39;),
      hideCls:!column.get(&#39;visible&#39;) ? CLS_HIDE : &#39;&#39;
    });
  },
  //获取表格内宽度
  _getInnerWidth : function(){
    return getInnerWidth(this.get(&#39;width&#39;));
  },
  //get cell tips
  _getTips:function (column, dataIndex, record) {
    var showTip = column.get(&#39;showTip&#39;),
        value = &#39;&#39;;
    if (showTip) {
      value = record[dataIndex];
      if (BUI.isFunction(showTip)) {
        value = showTip(value, record);
      }
    }
    return value;
  },
  //设置单元格边框
  _uiSetInnerBorder : function(v){
    var _self = this,
      el = _self.get(&#39;el&#39;);
    if(v){
      el.addClass(CLS_GRID_BORDER);
    }else{
      el.removeClass(CLS_GRID_BORDER);
    }
  },
  //设置表格模板
  _setTableTpl : function(tpl){
    var _self = this,
      bodyEl = _self.get(&#39;bodyEl&#39;);

    tpl = tpl || _self.get(&#39;tableTpl&#39;);
    $(tpl).appendTo(bodyEl);
    var tableEl = bodyEl.find(&#39;table&#39;),
      tbodyEl = bodyEl.find(&#39;tbody&#39;);
      //headerRowEl = _self._createHeaderRow();
          
    _self.set(&#39;tableEl&#39;,tableEl);
    _self.set(&#39;tbodyEl&#39;,tbodyEl);
    //_self.set(&#39;headerRowEl&#39;, headerRowEl);
    _self.set(&#39;itemContainer&#39;,tbodyEl);
    _self._setTableCls(_self.get(&#39;tableCls&#39;));
  },
  //设置table上的样式
  _uiSetTableCls : function(v){
    this._setTableCls(v);
  },
  //when set grid&#39;s height,the scroll can effect the width of its body and header
  _uiSetHeight:function (h) {
    var _self = this,
      bodyEl = _self.get(&#39;bodyEl&#39;);
    _self.get(&#39;el&#39;).height(h);
    _self.get(&#39;el&#39;).addClass(CLS_GRID_HEIGHT);

  },
  _uiSetWidth:function (w) {
    var _self = this;
    _self.get(&#39;el&#39;).width(w);
    _self.setBodyWidth(_self._getInnerWidth(w));
    _self.get(&#39;el&#39;).addClass(CLS_GRID_WITH);
    
  },
  _uiSetStripeRows : function(v){
    var _self = this,
      method = v ? &#39;addClass&#39; : &#39;removeClass&#39;;
    _self.get(&#39;el&#39;)[method](CLS_GRID_STRIPE);
  },
  _setTableCls : function(cls){
    var _self = this,
      tableEl = _self.get(&#39;tableEl&#39;);
    tableEl.attr(&#39;class&#39;,cls);
  }
},{
  ATTRS : {
    tableCls : {},
    bodyEl : {},
    tbodyEl : {},
    headerRowEl:{},
    tableEl : {},
    emptyEl : {}
  }
},{
  xclass : &#39;grid-view&#39;
});

<span id='BUI-Grid-Grid'>/**
</span> * @class BUI.Grid.Grid
 *
 * 表格控件,表格控件类图，一般情况下配合{@link BUI.Data.Store} 一起使用
 * &lt;p&gt;
 * &lt;img src=&quot;../assets/img/class-grid.jpg&quot;/&gt;
 * &lt;/p&gt;
 * &lt;p&gt;表格插件的类图：&lt;/p&gt;
 * &lt;p&gt;
 * &lt;img src=&quot;../assets/img/class-grid-plugins.jpg&quot;/&gt;
 * &lt;/p&gt;
 *
 * &lt;pre&gt;&lt;code&gt;
 *  BUI.use([&#39;bui/grid&#39;,&#39;bui/data&#39;],function(Grid,Data){
 *    var Grid = Grid,
 *      Store = Data.Store,
 *      columns = [{  //声明列模型
 *          title : &#39;表头1(20%)&#39;,
 *          dataIndex :&#39;a&#39;,
 *          width:&#39;20%&#39;
 *        },{
 *          id: &#39;123&#39;,
 *          title : &#39;表头2(30%)&#39;,
 *          dataIndex :&#39;b&#39;,
 *          width:&#39;30%&#39;
 *        },{
 *          title : &#39;表头3(50%)&#39;,
 *          dataIndex : &#39;c&#39;,
 *          width:&#39;50%&#39;
 *      }],
 *      data = [{a:&#39;123&#39;},{a:&#39;cdd&#39;,b:&#39;edd&#39;},{a:&#39;1333&#39;,c:&#39;eee&#39;,d:2}]; //显示的数据
 *
 *    var store = new Store({
 *        data : data,
 *        autoLoad:true
 *      }),
 *       grid = new Grid.Grid({
 *         render:&#39;#grid&#39;,
 *         width:&#39;100%&#39;,//这个属性一定要设置
 *         columns : columns,
 *         idField : &#39;a&#39;,
 *         store : store
 *       });
 *
 *     grid.render();
 *   });
 * &lt;/code&gt;&lt;/pre&gt;
 * @extends BUI.List.SimpleList
 */
var grid = List.SimpleList.extend({
<span id='global-method-createDom'>  /**
</span>   * @protected
   * @ignore
   */
  createDom:function () {
    var _self = this,
          render = _self.get(&#39;render&#39;),
          outerWidth = $(render).width(),
          width = _self.get(&#39;width&#39;);
          
    if(!width &amp;&amp; outerWidth){
      var appendWidth = _self.getAppendWidth();
      _self.set(&#39;width&#39;,outerWidth - appendWidth);
    }

    // 提前,中途设置宽度时会失败！！
    if (_self.get(&#39;width&#39;)) {
        _self.get(&#39;el&#39;).addClass(CLS_GRID_WITH);
    }

    if (_self.get(&#39;height&#39;)) {
      _self.get(&#39;el&#39;).addClass(CLS_GRID_HEIGHT);
    }

    //因为内部的边距影响header的forceFit计算，所以必须在header计算forceFit前置此项
    if(_self.get(&#39;innerBorder&#39;)){
        _self.get(&#39;el&#39;).addClass(CLS_GRID_BORDER);
    } 
  },
<span id='global-method-renderUI'>  /**
</span>   * @protected
   * @ignore
   */
  renderUI : function(){
    var _self = this;
    _self._initHeader();
    _self._initBars();
    _self._initLoadMask();
    _self.get(&#39;view&#39;).resetHeaderRow();
  },
<span id='BUI-Grid-Grid-method-bindUI'>  /**
</span>   * @private
   */
  bindUI:function () {
    var _self = this;
    _self._bindHeaderEvent();
    _self._bindBodyEvent();
    _self._bindItemsEvent();
  },
<span id='BUI-Grid-Grid-method-addColumn'>  /**
</span>   * 添加列
   * &lt;pre&gt;&lt;code&gt;
   *   //添加到最后
   *   grid.addColumn({title : &#39;new column&#39;,dataIndex : &#39;new&#39;,width:100});
   *   //添加到最前
   *   grid.addColumn({title : &#39;new column&#39;,dataIndex : &#39;new&#39;,width:100},0);
   * &lt;/code&gt;&lt;/pre&gt;
   * @param {Object|BUI.Grid.Column} column 列的配置，列类的定义 {@link BUI.Grid.Column}
   * @param {Number} index 添加到的位置
   * @return {BUI.Grid.Column}
   */
  addColumn : function(column, index){
    var _self = this,
      header = _self.get(&#39;header&#39;);

    if(header){
      column = header.addColumn(column, index);
    }else{
      column = new Column(column);
      _self.get(&#39;columns&#39;).splice(index,0,column);
    }  
    return column;
  },
<span id='BUI-Grid-Grid-method-clearData'>  /**
</span>   * 清除显示的数据
   * &lt;pre&gt;&lt;code&gt;
   *   grid.clearData();
   * &lt;/code&gt;&lt;/pre&gt;       
   */
  clearData : function(){
    this.clearItems();
  },
<span id='BUI-Grid-Grid-method-getRecords'>  /**
</span>   * 当前显示在表格中的数据
   * @return {Array} 纪录集合
   * @private
   */
  getRecords : function(){
    return this.getItems();
  },
<span id='BUI-Grid-Grid-method-findColumn'>  /**
</span>   * 使用索引或者id查找列
   * &lt;pre&gt;&lt;code&gt;
   *  //设置列的id,否则会自动生成
   *  {id : &#39;1&#39;,title : &#39;表头&#39;,dataIndex : &#39;a&#39;}
   *  //获取列
   *  var column = grid.findColumn(&#39;id&#39;);
   *  //操作列
   *  column.set(&#39;visible&#39;,false);
   * &lt;/code&gt;&lt;/pre&gt;
   * @param {String|Number} id|index  文本值代表编号，数字代表索引
   */
  findColumn : function(id){
    var _self = this,
      header = _self.get(&#39;header&#39;);
    if(BUI.isNumber(id)){
      return header.getColumnByIndex(id);
    }else{
      return header.getColumnById(id);
    }
  },
<span id='BUI-Grid-Grid-method-findColumnByField'>  /**
</span>   * 使用字段名查找列
   * &lt;pre&gt;&lt;code&gt;
   * //设置列dataIndex
   *  {id : &#39;1&#39;,title : &#39;表头&#39;,dataIndex : &#39;a&#39;}
   *  //获取列
   *  var column = grid.findColumnByField(&#39;a&#39;);
   *  //操作列
   *  column.set(&#39;visible&#39;,false);
   * &lt;/code&gt;&lt;/pre&gt;
   * @param {String} field 列的字段名 dataIndex
   */
  findColumnByField : function(field){
    var _self = this,
      header = _self.get(&#39;header&#39;);
    return header.getColumn(function(column){
      return column.get(&#39;dataIndex&#39;) === field;
    });
  },
<span id='BUI-Grid-Grid-method-findCell'>  /**
</span>   * 根据列的Id查找对应的单元格
   * @param {String|Number} id 列id
   * @param {Object|jQuery} record 本行对应的记录，或者是本行的ＤＯＭ对象
   * @protected
   * @return  {jQuery}
   */
  findCell:function (id, record) {
      var _self = this,
          rowEl = null;
      if (record instanceof $) {
          rowEl = record;
      } else {
          rowEl = _self.findRow(record);
      }
      if (rowEl) {
          return _self.get(&#39;view&#39;).findCell(id, rowEl);
      }
      return null;
  },
<span id='BUI-Grid-Grid-method-findRow'>  /**
</span>   * find the dom by the record in this component
   * @param {Object} record the record used to find row dom
   * @protected
   * @return jQuery
   */
  findRow:function (record) {
      var _self = this;
      return _self.get(&#39;view&#39;).findRow(record);
  },
<span id='BUI-Grid-Grid-method-removeColumn'>  /**
</span>   * 移除列
   * &lt;pre&gt;&lt;code&gt;
   *   var column = grid.findColumn(&#39;id&#39;);
   *   grid.removeColumn(column);
   * &lt;/code&gt;&lt;/pre&gt;
   * @param {BUI.Grid.Column} column 要移除的列
   */
  removeColumn:function (column) {
    var _self = this;
      _self.get(&#39;header&#39;).removeColumn(column);
  },
<span id='BUI-Grid-Grid-method-showData'>  /**
</span>   * 显示数据,当不使用store时，可以单独显示数据
   * &lt;pre&gt;&lt;code&gt;
   *   var data = [{},{}];
   *   grid.showData(data);
   * &lt;/code&gt;&lt;/pre&gt;
   * @param  {Array} data 显示的数据集合
   */
  showData : function(data){
    var _self = this;
    _self.set(&#39;items&#39;,data);
  },
<span id='BUI-Grid-Grid-method-resetColumns'>  /**
</span>   * 重置列，当列发生改变时同步DOM和数据
   * @protected
   */
  resetColumns:function () {
    var _self = this,
        store = _self.get(&#39;store&#39;);
    //recreate the header row
    _self.get(&#39;view&#39;).resetHeaderRow();
    //show data
    if (store) {
        _self.onLoad();
    }
  },
  //when body scrolled,the other component of grid also scrolled
  _bindScrollEvent:function () {
    var _self = this,
      el = _self.get(&#39;el&#39;),
      bodyEl = el.find(&#39;.&#39; + CLS_GRID_BODY),
      header = _self.get(&#39;header&#39;);

    bodyEl.on(&#39;scroll&#39;, function () {
      var left = bodyEl.scrollLeft(),
          top = bodyEl.scrollTop();
      header.scrollTo({left:left, top:top});
      _self.fire(&#39;scroll&#39;, {scrollLeft:left, scrollTop:top,bodyWidth : bodyEl.width(),bodyHeight : bodyEl.height()});
    });
  },
  //bind header event,when column changed,followed this component
  _bindHeaderEvent:function () {
      var _self = this,
        header = _self.get(&#39;header&#39;),
        view = _self.get(&#39;view&#39;),
        store = _self.get(&#39;store&#39;);
      header.on(&#39;afterWidthChange&#39;, function (e) {
        var sender = e.target;
        if (sender !== header) {
            view.resetColumnsWidth(sender);
        }
      });

      header.on(&#39;afterSortStateChange&#39;, function (e) {
        var column = e.target,
            val = e.newVal;
        if (val &amp;&amp; store) {
          store.sort(column.get(&#39;dataIndex&#39;), column.get(&#39;sortState&#39;));
        }
      });

      header.on(&#39;afterVisibleChange&#39;, function (e) {
        var sender = e.target;
        if (sender !== header) {
          view.setColumnVisible(sender);
          _self.fire(&#39;columnvisiblechange&#39;,{column:sender});
        }
      });

      header.on(&#39;click&#39;, function (e) {
        var sender = e.target;
        if (sender !== header) {
          _self.fire(&#39;columnclick&#39;,{column:sender,domTarget:e.domTarget});
        }
      });

      header.on(&#39;forceFitWidth&#39;, function () {
        if (_self.get(&#39;rendered&#39;)) {
            _self.resetColumns();
        }
      });

      header.on(&#39;add&#39;, function (e) {
        if (_self.get(&#39;rendered&#39;)) {
          _self.fire(&#39;columnadd&#39;,{column:e.column,index:e.index});
            _self.resetColumns();
        }
      });

      header.on(&#39;remove&#39;, function (e) {
        if (_self.get(&#39;rendered&#39;)) {
          _self.resetColumns();
          _self.fire(&#39;columnremoved&#39;,{column:e.column,index:e.index});
        }
      });

  },
  //when body scrolled, header can followed
  _bindBodyEvent:function () {
    var _self = this;
    _self._bindScrollEvent();       
  },
  //绑定记录DOM相关的事件
  _bindItemsEvent : function(){
    var _self = this,
      store = _self.get(&#39;store&#39;);

    _self.on(&#39;itemsshow&#39;,function(){
      _self.fire(&#39;aftershow&#39;);
    });

    _self.on(&#39;itemsclear&#39;,function(){
      _self.fire(&#39;clear&#39;);
    });

    _self.on(&#39;itemclick&#39;,function(ev){
      var target = ev.domTarget,
        record = ev.item,
        cell = $(target).closest(&#39;.&#39; + CLS_GRID_CELL),
        rowEl = $(target).closest(&#39;.&#39; + CLS_GRID_ROW),
        rst; //用于是否阻止事件触发

      if(cell.length){
        rst = _self.fire(&#39;cellclick&#39;, {record:record, row:rowEl[0], cell:cell[0], field:cell.attr(ATTR_COLUMN_FIELD), domTarget:target,domEvent:ev.domEvent});
      }

      if(rst === false){
        return rst;
      }

      return _self.fire(&#39;rowclick&#39;, {record:record, row:rowEl[0], domTarget:target});
        
    });

    _self.on(&#39;itemunselected&#39;,function(ev){
      _self.fire(&#39;rowunselected&#39;,getEventObj(ev));
    });

    _self.on(&#39;itemselected&#39;,function(ev){
      _self.fire(&#39;rowselected&#39;,getEventObj(ev));
    });

    _self.on(&#39;itemrendered&#39;,function(ev){
      _self.fire(&#39;rowcreated&#39;,getEventObj(ev));
    });
    
    _self.on(&#39;itemremoved&#39;,function(ev){
      _self.fire(&#39;rowremoved&#39;,getEventObj(ev));
    });

    _self.on(&#39;itemupdated&#39;,function(ev){
      _self.fire(&#39;rowupdated&#39;,getEventObj(ev));
    });

    function getEventObj(ev){
      return {record : ev.item, row : ev.domTarget, domTarget : ev.domTarget};
    }
  },
  //获取表格内部的宽度，受边框的影响，
  //内部的宽度不能等于表格宽度
  _getInnerWidth : function(width){
    width = width || this.get(&#39;width&#39;);
    return getInnerWidth(width);
  },
  //init header,if there is not a header property in config,instance it
  _initHeader:function () {
    var _self = this,
      header = _self.get(&#39;header&#39;),
      container = _self.get(&#39;el&#39;).find(&#39;.&#39;+ CLS_GRID_HEADER_CONTAINER);
    if (!header) {
      header = new Header({
        columns:_self.get(&#39;columns&#39;),
        tableCls:_self.get(&#39;tableCls&#39;),
        forceFit:_self.get(&#39;forceFit&#39;),
        width:_self._getInnerWidth(),
        render: container,
        parent : _self
      }).render();
      //_self.addChild(header);
      _self.set(&#39;header&#39;, header);
    }
  },
  //初始化 上下工具栏
  _initBars:function () {
    var _self = this,
        bbar = _self.get(&#39;bbar&#39;),
        tbar = _self.get(&#39;tbar&#39;);
    _self._initBar(bbar, CLS_GRID_BBAR, &#39;bbar&#39;);
    _self._initBar(tbar, CLS_GRID_TBAR, &#39;tbar&#39;);
  },
  //set bar&#39;s elCls to identify top bar or bottom bar
  _initBar:function (bar, cls, name) {
    var _self = this,
      store = null,
      pagingBarCfg = null;
    if (bar) {
      //未指定xclass,同时不是Controller时
      if(!bar.xclass &amp;&amp; !(bar instanceof Component.Controller)){
        bar.xclass = &#39;bar&#39;;
        bar.children = bar.children || [];

        if(bar.items){
          bar.children.push({
              xclass : &#39;bar&#39;,
              defaultChildClass : &quot;bar-item-button&quot;,
              elCls : CLS_BUTTON_BAR,
              children : bar.items
          });
          bar.items=null;
        }

        // modify by fuzheng
        if(bar.pagingBar){
          store = _self.get(&#39;store&#39;);
          pagingBarCfg = {
            xclass : &#39;pagingbar&#39;,
            store : store,
            pageSize : store.pageSize
          };
          if(bar.pagingBar !== true){
            pagingBarCfg = BUI.merge(pagingBarCfg, bar.pagingBar);
          }
          bar.children.push(pagingBarCfg);
        }
      }
      if (bar.xclass) {
        var barContainer = _self.get(&#39;el&#39;).find(&#39;.&#39; + cls);
        barContainer.show();
        bar.render = barContainer;
        //bar.parent=_self;
        bar.elTagName = &#39;div&#39;;
        bar.autoRender = true;
        bar = _self.addChild(bar); //Component.create(bar).create();
      }
      _self.set(name, bar);
    }
    return bar;
  },
  //when set &#39;loadMask = true&#39; ,create a loadMask instance
  _initLoadMask:function () {
    var _self = this,
      loadMask = _self.get(&#39;loadMask&#39;);
    if (loadMask &amp;&amp; !loadMask.show) {
      loadMask = new BUI.Mask.LoadMask({el:_self.get(&#39;el&#39;)});
      _self.set(&#39;loadMask&#39;, loadMask);
    }
  },
  //调整宽度时，调整内部控件宽度
  _uiSetWidth:function (w) {
    var _self = this;
    if (_self.get(&#39;rendered&#39;)) {
      if(!isPercent(w)){
        _self.get(&#39;header&#39;).set(&#39;width&#39;, _self._getInnerWidth(w));
      }else{
        _self.get(&#39;header&#39;).set(&#39;width&#39;,&#39;100%&#39;);
      }
      
    }
    _self.get(&#39;view&#39;).setTableWidth();
  },
  //设置自适应宽度
  _uiSetForceFit:function (v) {
    var _self = this;
    _self.get(&#39;header&#39;).set(&#39;forceFit&#39;, v);
  },
  //when set grid&#39;s height,the scroll can effect the width of its body and header
  _uiSetHeight:function (h,obj) {
    var _self = this,
      header = _self.get(&#39;header&#39;);
    _self.get(&#39;view&#39;).setBodyHeight(h);
    if (_self.get(&#39;rendered&#39;)) {
      if (_self.get(&#39;forceFit&#39;) &amp;&amp; !obj.prevVal) {
        header.forceFitColumns();
        //强迫对齐时，由未设置高度改成设置高度，增加了17像素的滚动条宽度，所以重置表格宽度
        _self.get(&#39;view&#39;).setTableWidth();
      }
      header.setTableWidth();
    }
    
  },
<span id='BUI-Grid-Grid-method-onLoad'>  /**
</span>   * 加载数据
   * @protected
   */
  onLoad : function(){
    var _self = this,
      store = _self.get(&#39;store&#39;);
    grid.superclass.onLoad.call(this);
    if(_self.get(&#39;emptyDataTpl&#39;)){ //初始化的时候不显示空白数据的文本
      if(store &amp;&amp; store.getCount() == 0){
        _self.get(&#39;view&#39;).showEmptyText();
      }else{
        _self.get(&#39;view&#39;).clearEmptyText();
      }
    }
  }
},{
  ATTRS : {
<span id='BUI-Grid-Grid-property-header'>    /**
</span>     * 表头对象
     * @type {BUI.Grid.Header}
     * @protected
     */
    header:{

    },
<span id='BUI-Grid-Grid-cfg-bbar'>    /**
</span>     * @see {BUI.Grid.Grid#tbar}
     * &lt;pre&gt;&lt;code&gt;
     * grid = new Grid.Grid({
     *    render:&#39;#grid&#39;,
     *    columns : columns,
     *    width : 700,
     *    forceFit : true,
     *    tbar:{ //添加、删除
     *        items : [{
     *          btnCls : &#39;button button-small&#39;,
     *          text : &#39;&lt;i class=&quot;icon-plus&quot;&gt;&lt;/i&gt;添加&#39;,
     *          listeners : {
     *            &#39;click&#39; : addFunction
     *          }
     *        },
     *        {
     *          btnCls : &#39;button button-small&#39;,
     *          text : &#39;&lt;i class=&quot;icon-remove&quot;&gt;&lt;/i&gt;删除&#39;,
     *          listeners : {
     *            &#39;click&#39; : delFunction
     *          }
     *        }]
     *    },
     *    store : store
     *  });
     *
     * grid.render();
     * &lt;/code&gt;&lt;/pre&gt;
     * @cfg {Object|BUI.Toolbar.Bar} bbar
     */
<span id='global-property-bbar'>    /**
</span>     * @see {BUI.Grid.Grid#tbar}
     * @type {Object}
     * @ignore
     */
    bbar:{

    },
    itemCls : {
      value : CLS_GRID_ROW
    },
<span id='BUI-Grid-Grid-cfg-columns'>    /**
</span>     * 列的配置 用来配置 表头 和 表内容。{@link BUI.Grid.Column}
     * @cfg {Array} columns
     */
    columns:{
      view : true,
      value:[]
    },
<span id='BUI-Grid-Grid-cfg-forceFit'>    /**
</span>     * 强迫列自适应宽度，如果列宽度大于Grid整体宽度，等比例缩减，否则等比例增加
     * &lt;pre&gt;&lt;code&gt;
     *  var grid = new Grid.Grid({
     *    render:&#39;#grid&#39;,
     *    columns : columns,
     *    width : 700,
     *    forceFit : true, //自适应宽度
     *    store : store
     *  });
     * &lt;/code&gt;&lt;/pre&gt;
     * @cfg {Boolean} [forceFit= false]
     */
<span id='BUI-Grid-Grid-property-forceFit'>    /**
</span>     * 强迫列自适应宽度，如果列宽度大于Grid整体宽度，等比例缩减，否则等比例增加
     * &lt;pre&gt;&lt;code&gt;
     *  grid.set(&#39;forceFit&#39;,true);
     * &lt;/code&gt;&lt;/pre&gt;
     * @type {Boolean}
     * @default &#39;false&#39;
     */
    forceFit:{
      sync:false,
      view : true,
      value:false
    },
<span id='BUI-Grid-Grid-cfg-emptyDataTpl'>    /**
</span>     * 数据为空时，显示的提示内容
     * &lt;pre&gt;&lt;code&gt;
     *  var grid = new Grid({
     *   render:&#39;#J_Grid4&#39;,
     *   columns : columns,
     *   store : store,
     *   emptyDataTpl : &#39;&amp;lt;div class=&quot;centered&quot;&amp;gt;&amp;lt;img alt=&quot;Crying&quot; src=&quot;http://img03.taobaocdn.com/tps/i3/T1amCdXhXqXXXXXXXX-60-67.png&quot;&amp;gt;&amp;lt;h2&amp;gt;查询的数据不存在&amp;lt;/h2&amp;gt;&amp;lt;/div&amp;gt;&#39;,
     *   width:&#39;100%&#39;
     *
     * });
     * 
     * grid.render();
     * &lt;/code&gt;&lt;/pre&gt;
     ** @cfg {Object} emptyDataTpl
     */
    emptyDataTpl : {
      view : true
    },
<span id='BUI-Grid-Grid-property-headerRowTpl'>    /**
</span>     * 表格首行记录模板，首行记录，隐藏显示，用于确定表格各列的宽度
     * @type {String}
     * @protected
     */
    headerRowTpl:{
      view:true,
      value:&#39;&lt;tr class=&quot;&#39; + PREFIX + &#39;grid-header-row&quot;&gt;{cellsTpl}&lt;/tr&gt;&#39;
    },
<span id='BUI-Grid-Grid-property-headerCellTpl'>    /**
</span>     * 表格首行记录的单元格模板
     * @protected
     * @type {String}
     */
    headerCellTpl:{
      view:true,
      value:&#39;&lt;td class=&quot;{hideCls} &#39; + CLS_TD_PREFIX + &#39;{id}&quot; width=&quot;{width}&quot; style=&quot;height:0&quot;&gt;&lt;/td&gt;&#39;
    },
<span id='BUI-Grid-Grid-property-rowTpl'>    /**
</span>     * 表格数据行的模板
     * @type {String}
     * @default  &lt;pre&gt;&#39;&amp;lt;tr class=&quot;&#39; + CLS_GRID_ROW + &#39; {{oddCls}}&quot;&amp;gt;{{cellsTpl}}&amp;lt;/tr&amp;gt;&#39;&lt;/pre&gt;
     */
    rowTpl:{
      view:true,
      value:&#39;&lt;tr class=&quot;&#39; + CLS_GRID_ROW + &#39; {oddCls}&quot;&gt;{cellsTpl}&lt;/tr&gt;&#39;
    },
<span id='BUI-Grid-Grid-property-cellTpl'>    /**
</span>     * 单元格的模板
     * @type {String}
     * &lt;pre&gt;
     *     &#39;&amp;lt;td  class=&quot;&#39; + CLS_GRID_CELL + &#39; grid-td-{{id}}&quot; data-column-id=&quot;{{id}}&quot; data-column-field = {{dataIndex}}&amp;gt;&#39;+
     *        &#39;&amp;lt;div class=&quot;&#39; + CLS_GRID_CELL_INNER + &#39;&quot; &amp;gt;{{cellText}}&amp;lt;/div&amp;gt;&#39;+
     *    &#39;&amp;lt;/td&amp;gt;&#39;
     *&lt;/pre&gt;
     */
    cellTpl:{
      view:true,
      value:&#39;&lt;td  class=&quot;{elCls} {hideCls} &#39; + CLS_GRID_CELL + &#39; &#39; + CLS_TD_PREFIX + &#39;{id}&quot; data-column-id=&quot;{id}&quot; data-column-field = &quot;{dataIndex}&quot; &gt;&#39; +
          &#39;&lt;div class=&quot;&#39; + CLS_GRID_CELL_INNER + &#39;&quot; &gt;{cellText}&lt;/div&gt;&#39; +
          &#39;&lt;/td&gt;&#39;

    },
<span id='BUI-Grid-Grid-property-cellTextTpl'>    /**
</span>     * 单元格文本的模板
     * @default &amp;lt;span class=&quot;&#39; + CLS_CELL_TEXT + &#39; &quot; title = &quot;{{tips}}&quot;&amp;gt;{{text}}&amp;lt;/span&amp;gt;
     * @type {String}
     */
    cellTextTpl:{
      view:true,
      value:&#39;&lt;span class=&quot;&#39; + CLS_CELL_TEXT + &#39; &quot; title = &quot;{tips}&quot;&gt;{text}&lt;/span&gt;&#39;
    },
<span id='BUI-Grid-Grid-property-events'>    /**
</span>     * 事件集合
     * @type {Object}
     */
    events:{
      value:{
<span id='BUI-Grid-Grid-event-aftershow'>        /**
</span>         * 显示完数据触发
         * @event
         */
        &#39;aftershow&#39; : false,
<span id='BUI-Grid-Grid-event-clear'>         /**
</span>         * 表格的数据清理完成后
         * @event
         */
        &#39;clear&#39; : false,
<span id='BUI-Grid-Grid-event-cellclick'>        /**
</span>         * 点击单元格时触发,如果return false,则会阻止 &#39;rowclick&#39; ,&#39;rowselected&#39;,&#39;rowunselected&#39;事件
         * @event
         * @param {jQuery.Event} e  事件对象
         * @param {Object} e.record 此行的记录
         * @param {String} e.field 点击单元格列对应的字段名称
         * @param {HTMLElement} e.row 点击行对应的DOM
         * @param {HTMLElement} e.cell 点击对应的单元格的DOM
         * @param {HTMLElement} e.domTarget 点击的DOM
         * @param {jQuery.Event} e.domEvent 点击的jQuery事件
         */
        &#39;cellclick&#39; : false,
<span id='BUI-Grid-Grid-event-columnclick'>        /**
</span>         * 点击表头
         * @event 
         * @param {jQuery.Event} e 事件对象
         * @param {BUI.Grid.Column} e.column 列对象
         * @param {HTMLElement} e.domTarget 点击的DOM
         */
        &#39;columnclick&#39; : false,
<span id='BUI-Grid-Grid-event-rowclick'>        /**
</span>         * 点击行时触发，如果return false,则会阻止&#39;rowselected&#39;,&#39;rowunselected&#39;事件
         * @event
         * @param {jQuery.Event} e  事件对象
         * @param {Object} e.record 此行的记录
         * @param {HTMLElement} e.row 点击行对应的DOM
         * @param {HTMLElement} e.domTarget 点击的DOM
         */
        &#39;rowclick&#39; : false,
<span id='BUI-Grid-Grid-event-rowcreated'>        /**
</span>         * 当一行数据显示在表格中后触发
         * @event
         * @param {jQuery.Event} e  事件对象
         * @param {Object} e.record 此行的记录
         * @param {HTMLElement} e.row 行对应的DOM
         * @param {HTMLElement} e.domTarget 此事件中等于行对应的DOM
         */
        &#39;rowcreated&#39; : false,
<span id='BUI-Grid-Grid-event-rowremoved'>        /**
</span>         * 移除一行的DOM后触发
         * @event
         * @param {jQuery.Event} e  事件对象
         * @param {Object} e.record 此行的记录
         * @param {HTMLElement} e.row 行对应的DOM
         * @param {HTMLElement} e.domTarget 此事件中等于行对应的DOM
         */
        &#39;rowremoved&#39; : false,
<span id='BUI-Grid-Grid-event-rowselected'>        /**
</span>         * 选中一行时触发
         * @event
         * @param {jQuery.Event} e  事件对象
         * @param {Object} e.record 此行的记录
         * @param {HTMLElement} e.row 行对应的DOM
         * @param {HTMLElement} e.domTarget 此事件中等于行对应的DOM
         */
        &#39;rowselected&#39; : false,
<span id='BUI-Grid-Grid-event-rowunselected'>        /**
</span>         * 清除选中一行时触发，只有多选情况下触发
         * @event
         * @param {jQuery.Event} e  事件对象
         * @param {Object} e.record 此行的记录
         * @param {HTMLElement} e.row 行对应的DOM
         * @param {HTMLElement} e.domTarget 此事件中等于行对应的DOM
         */
        &#39;rowunselected&#39; : false,
<span id='BUI-Grid-Grid-event-scroll'>        /**
</span>         * 表格内部发生滚动时触发
         * @event
         * @param {jQuery.Event} e  事件对象
         * @param {Number} e.scrollLeft 滚动到的横坐标
         * @param {Number} e.scrollTop 滚动到的纵坐标
         * @param {Number} e.bodyWidth 表格内部的宽度
         * @param {Number} e.bodyHeight 表格内部的高度
         */
        &#39;scroll&#39; : false
      }
    },
<span id='BUI-Grid-Grid-property-stripeRows'>    /**
</span>     * 是否奇偶行添加分割色
     * @type {Boolean}
     * @default true
     */
    stripeRows:{
      view:true,
      value:true
    },
<span id='BUI-Grid-Grid-property-tbar'>    /**
</span>     * 顶层的工具栏，跟bbar结构一致,可以是工具栏对象@see {BUI.Toolbar.Bar},也可以是xclass形式的配置项，
     * 还可以是包含以下字段的配置项
     * &lt;ol&gt;
     * &lt;li&gt;items:工具栏的项，
     *    - 默认是按钮(xtype : button)、
     *    - 文本(xtype : text)、
     *    - 链接(xtype : link)、
     *    - 分隔符(bar-item-separator)以及自定义项
     * &lt;/li&gt;
     * &lt;li&gt;pagingBar:表明包含分页栏&lt;/li&gt;
     * &lt;/ol&gt;
     * @type {Object|BUI.Toolbar.Bar}
     * @example
     * tbar:{
     *     items:[
     *         {
     *             text:&#39;命令一&#39; //默认是按钮
     *             
     *         },
     *         {
     *             xtype:&#39;text&#39;,
     *             text:&#39;文本&#39;
     *         }
     *     ],
     *     pagingBar:true
     * }
     */
    tbar:{

    },
<span id='BUI-Grid-Grid-cfg-tableCls'>    /**
</span>     * 可以附加到表格上的样式.
     * @cfg {String} tableCls
     * @default &#39;bui-grid-table&#39; this css cannot be overridden
     */
    tableCls:{
      view : true,
      sync : false,
      value:PREFIX + &#39;grid-table&#39;
    },
<span id='BUI-Grid-Grid-property-tableTpl'>    /**
</span>     * 表体的模板
     * @protected
     * @type {String}
     */
    tableTpl : {
      view:true,
      value:&#39;&lt;table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; &gt;&#39; +
          &#39;&lt;tbody&gt;&lt;/tbody&gt;&#39; +
          &#39;&lt;/table&gt;&#39;
    },
    tpl : {
      value : &#39;&lt;div class=&quot;&#39;+CLS_GRID_TBAR+&#39;&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt;&lt;div class=&quot;&#39;+CLS_GRID_HEADER_CONTAINER+&#39;&quot;&gt;&lt;/div&gt;&lt;div class=&quot;&#39;+CLS_GRID_BODY+&#39;&quot;&gt;&lt;/div&gt;&lt;div style=&quot;display:none&quot; class=&quot;&#39; + CLS_GRID_BBAR + &#39;&quot;&gt;&lt;/div&gt;&#39;
    },
<span id='BUI-Grid-Grid-cfg-innerBorder'>    /**
</span>     * 单元格左右之间是否出现边框
     * 
     * @cfg {Boolean} [innerBorder=true]
     */
<span id='BUI-Grid-Grid-property-innerBorder'>    /**
</span>     * 单元格左右之间是否出现边框
     * &lt;pre&gt;&lt;code&gt;
     *   var  grid = new Grid.Grid({
     *     render:&#39;#grid&#39;,
     *     innerBorder: false, // 默认为true
     *     columns : columns,
     *     store : store
     *   });
     * &lt;/code&gt;&lt;/pre&gt;
     * @type {Boolean}
     * @default true
     */
    innerBorder : {
      sync:false,
      value : true
    },
<span id='BUI-Grid-Grid-property-useEmptyCell'>    /**
</span>     * 是否使用空白单元格用于占位，使列宽等于设置的宽度
     * @type {Boolean}
     * @private
     */
    useEmptyCell : {
      view : true,
      value : true
    },
<span id='BUI-Grid-Grid-property-useHeaderRow'>    /**
</span>     * 是否首行使用空白行，用以确定表格列的宽度
     * @type {Boolean}
     * @private
     */
    useHeaderRow : {
      view : true,
      value : true
    },
<span id='BUI-Grid-Grid-property-xview'>    /**
</span>     * Grid 的视图类型
     * @type {BUI.Grid.GridView}
     */
    xview : {
      value : gridView
    }
  }
},{
  xclass : &#39;grid&#39;
});

grid.View = gridView;

module.exports = grid;

<span id='global-property-'>/**
</span> * @ignore
 * 2013.1.18 
 *   这是一个重构的版本，将Body取消掉了，目的是为了可以将Grid和SimpleGrid联系起来，
 *   同时将selection 统一         
 */
</pre>
</body>
</html>
